import React, { Component } from 'react';
import '../Public/reset.css'
import axios from '../../http/axios'
import '../Public/iconfont.css'
import './getCity.scss'
import store from '../../redux/store/index'
import { getCityLocat, getCityHot, getCityGroup,cityIdDeliver } from '../../redux/actionCreators/home_action/index'
import { getHotCity, getLocatCity, getGroupCity } from '../../http/api'
import { connect } from "react-redux";


// let gusss = {
//     latitude: 31.23037,
//     longitude: 121.473701,
// }
const AZ = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',]
class getCity extends Component {
    state = {
        locatcity: ''
    }
    componentDidMount() {
        store.dispatch(getCityLocat())
        store.dispatch(getCityHot())
        store.dispatch(getCityGroup())
        // if(this.props.locatcity && this.props.locatcity){
        //     console.log(this.props.locatcity);
        //    let arrLocat=[]
        
        // }
    }
    diJi = () => {
        console.log(store.getState());
    }

    handelReturn = () => {
        this.props.history.goBack()
    }
    cityGo=(e)=>{
        e.preventDefault();
        let cityId=e.target.dataset.id
       this.props.history.push('/home/citysearch')
      store.dispatch(cityIdDeliver(cityId))
      
    }
    render() {
        //   for(let i=0;i<AZ.length;i++){
        //    for(let j=0;j<this.props.groupcity.length;j++){

        //    }
        //   }
        return (
            <div className="city">
                <div className="cityHead">
                    <div className="headLeft" onClick={this.handelReturn}>
                        <i className="iconfont icon-zuojiantou"></i>
                    </div>
                    <div className="headRight">
                        <span>登录</span>
                        <span> | </span>
                        <span>注册</span>
                    </div>
                </div>
                <div className="city-main">
                    <div className='city-tip'>
                        <p >当前定位城市：</p>
                        <p >定位不准时，请在城市列表中选择</p>
                    </div>
                    <div className="city-guess" onClick={this.cityGo}>
                        <a href="">
                            <span data-id={this.props.locatcity && this.props.locatcity.id}>{this.props.locatcity && this.props.locatcity.name}</span>
                        </a>

                        <i className="iconfont icon-jiantou"></i>
                    </div>
                    <div className="city-hot">
                        <div className="city-hot-title">
                            <p>热门城市</p>
                        </div>
                        <div className="city-hotlist">
                            <ul className="city-hot-ul">
                                {

                                    this.props.hotcity && this.props.hotcity.map((item, index) => {
                                        return (
                                            <li className="hot-city-name" onClick={this.cityGo} key={index} data-id={item.id}>{item.name}</li>
                                        )

                                    })
                                }
                            </ul>

                        </div>
                    </div>
                    <div className="groupCity">
                        {
                            this.props.groupcity && this.props.groupcity.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <div className="city-group">
                                            <div className="city-group-title">
                                                <p>{item[0].abbr.substring(0,1)}</p>
                                            </div>
                                            <div className="city-grouplist">
                                                <ul className="city-group-ul">{
                                                    item.map((i,key)=>{
                                                        return (
                                                            <li className="group-city-name" data-id={i.id} key={key} onClick={this.cityGo}>{i.name}</li>
                                                        )
                                                    })
                                                }
                                                   
                                                   
                                                </ul>
                                            </div>
                                        </div>
                                       
                                    </div>

                                )
                            })
                        }

                    </div>
                </div>
            </div>


        );
    }
}

export default connect((state) => {
   
    return {

        groupcity: state.homeReducer.groupcity,
        hotcity: state.homeReducer.hotcity,
        locatcity: state.homeReducer.locatcity,
        idcity:state.homeReducer.idcity
    }
}, null)(getCity);

